<template>
  <div class="home">
    <van-nav-bar left-arrow border @click-left="onClickLeft">
      <template #title>
        <span class="title-bar">登录</span>
      </template>
    </van-nav-bar>
    <!-- 登录表单 -->
    <div class="login-form">
      <div class="Welcome">Welcome Login Todolist</div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="loginName"
          name="loginName"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="passWord"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :loading="lodaing">登录</van-button>
        </div>
      </van-form>
      <div class="footer">
        <div @click="$router.push({ name: 'retrievepassword' })">
          忘记密码？
        </div>
        <div class="registered" @click="Goregisteredpage">快速注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Signin } from "../../api/login";

import { Toast } from "vant";

import { reactive, toRefs } from "@vue/composition-api";

export default {
  name: "login",
  setup(props,{ root }) {
    
    const state = reactive({
      loginName: "",
      passWord: "",
      lodaing: false,
    });
    // 返回操作
    const onClickLeft = () => {
      console.log("返回");
    };
    // 提交
    const onSubmit = async (params) => {
      try {
        state.lodaing = true;
        let res = await Signin(params);
        if (res.payload) {
          state.lodaing = false;
          window.localStorage.setItem(
            "token",
            JSON.stringify(res.payload.token)
          );
          root.$store.commit('setToken',res.payload.token);
          Toast.success("登录成功");
          root.$router.push("/home/todo");
          console.log(res);
        } else {
          Toast.fail("账号与密码不匹配,请核对后再次登录");
          state.lodaing = false;
        }
      } catch (error) {
        state.lodaing = false;
      }
    };

    const Goregisteredpage= () => {
      root.$router.push({ name: "registered" });
    }

    return {
      ...toRefs(state),
      onClickLeft,
      onSubmit,
      Goregisteredpage
    }
  }
};
</script>


<style lang='less' scoped>
@import url("../../commonStyles/size.less");

.home {
  margin: 0;
  // padding: 0.26667rem 0.42667rem;
  .btn {
    font-size: 28rem / 75;
    color: red;
  }
  .title-bar {
    font-size: 32rem / 75;
  }
  .Welcome {
    font-size: 30rem / 75;
    height: 250rem/ 75;
    text-align: center;
    line-height: 250rem / 75;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    font-size: @Size26;
    width: 650rem / 75;
    margin: 0 auto;
    margin-top: 50rem / 75;
  }
  .registered {
    color: @primary;
  }
}
</style>
